<template>
  <div>
    <div class="modal-source">
        <div class="modal-right-btn"><Button
            @click="batchExamine"
            type="primary"
            v-if="modalItem.publishStatus == 'UnPublished'"
            class="marginLeft10"
            size="small"
            v-privilege="'assets-batch-audit'"
            >审核</Button
          ></div>
      <div class="modal-left">
        <div class="img-item" v-if="modalItem.assetType == 'Photography'">
          <img class="default-img" :src="modalItem.url" alt="" />
        </div>
        <div class="video-item" v-else-if="modalItem.assetType != 'Photography'">
          <video
            data-v-6ea9570c=""
            controls="controls"
            :src="modalItem.url"
            loop="loop"
            type="video/mp4"
            class="modal-video"
          >
            <source data-v-6ea9570c="" :src="modalItem.url" type="video/mp4" />
          </video>
        </div>
        <div class="pdf-item" v-else>
          <pdf
            style="width: 100%; height: 100%"
            ref="pdf"
            v-for="i in numPages"
            :key="i"
            :src="pdfSrc"
            :page="i"
          ></pdf>
        </div>
      </div>
      <div class="modal-right">
        <!-- 图片 -->
        <Form :label-width="120" ref="modalItem" label-position="left">
          <FormItem label="Name" prop="name">
            <Input
              v-if="isUpdate"
              placeholder=""
              v-model="modalItem.name"
            />
            <span v-else>{{ modalItem.name }}</span>
          </FormItem>
          <FormItem label="File type" prop="flieType">
            <Select
              v-if="isUpdate"
              placeholder="请选择文件类型"
              v-model="modalItem.fileType"
            >
              <Option v-for="item in fileTypeList" :key="item" :value="item.configKey">{{item.configKey}}</Option>
            </Select>
            <span v-else>{{ modalItem.fileType }}</span>
          </FormItem>
          <FormItem label="Asset Type" prop="assetType">
            <Select  v-if="isUpdate"  v-model="modalItem.assetType">
              <Option v-for="item in assetType" :key="item" :value="item.configKey">{{item.configKey}}</Option>
            </Select>
            <span v-else>{{ modalItem.assetType }}</span>
          </FormItem>
          <FormItem label="File size" prop="fileSize">
            <Input
              v-if="isUpdate"
              placeholder=""
              v-model="modalItem.fileSize"
            />
            <span v-else>{{ modalItem.fileSize }}</span>
          </FormItem>
          <FormItem label="SubBrand" prop="subBrand">
            <Input
              v-if="isUpdate"
              placeholder=""
              v-model="modalItem.subBrand"
            />
            <span v-else>{{ modalItem.subBrand }}</span>
          </FormItem>
          <FormItem label="Tag">
            <!-- <Select :disabled="isUpdate?false:true" v-model="tagInfo" multiple :max-tag-count="12" filterable>
                <Option v-for="item in tagList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select> -->
            <span>{{ modalItem.assetTags }}</span>
          </FormItem>
          <FormItem label="Status" prop="status">
            <span>{{ modalItem.publishStatus }}</span>
          </FormItem>

          <FormItem label="Season" prop="season">
            <Select
              v-if="isUpdate"
              v-model="modalItem.season"
            >
              <Option v-for="item in seasonTypeList" :key="item" :value="item.configKey">{{item.configKey}}</Option>
            </Select>
            <span v-else>{{ modalItem.season }}</span>
          </FormItem>
          <FormItem label="Year" prop="year">
            <DatePicker v-if="isUpdate" @on-change="getYear"
              format="yyyy" type="year" :value="modalItem.year"
              ></DatePicker>
            <span v-else>{{ modalItem.year }}</span>
          </FormItem>
          <FormItem label="Date Created" prop="dateCreated">
            <DatePicker v-if="isUpdate" @on-change="getDateCreatedTime"
            format="yyyy-MM-dd HH:mm:ss" :value="modalItem.dateCreated"
              type="datetime"></DatePicker>
            <span v-else>{{ modalItem.dateCreated }}</span>
          </FormItem>
          <FormItem label="Uploaded" prop="uploaded">
            <DatePicker v-if="isUpdate" @on-change="getUploadedTime"
            format="yyyy-MM-dd HH:mm:ss" :value="modalItem.uploaded"
              type="datetime"></DatePicker>
            <span v-else>{{ modalItem.uploaded }}</span>
          </FormItem>
          <FormItem label="Capture date" prop="captureDate">
            <DatePicker v-if="isUpdate" type="datetime"  format="yyyy-MM-dd HH:mm:ss" :value="modalItem.captureDate"
              @on-change="getCaptureTime">
            </DatePicker>
            <span v-else>{{ modalItem.captureDate }}</span>
          </FormItem>
        </Form>
      </div>

    </div>
     <div class="modal-source">
        <div class="modal-right">
              <Form :label-width="120" ref="modalItem" label-position="left">
           <FormItem label="Creator" prop="creator">
            <Input
              v-if="isUpdate"
              placeholder=""
              v-model="modalItem.creator"
            />
            <span v-else>{{ modalItem.creator }}</span>
          </FormItem>
          <FormItem label="Regional Usage" prop="regionalUsage">
            <Input
              v-if="isUpdate"
              placeholder=""
              v-model="modalItem.regionalUsage"
            />
            <span v-else>{{ modalItem.regionalUsage }}</span>
          </FormItem>
          <FormItem label="Gap Department" prop="gapDepartment">
            <Input
              v-if="isUpdate"
              placeholder=""
              v-model="modalItem.gapDepartment"
            />
            <span v-else>{{ modalItem.gapDepartment }}</span>
          </FormItem>
          <FormItem label="KOL" prop="kol">
            <Input
              v-if="isUpdate"
              placeholder=""
              v-model="modalItem.kol"
            />
            <span v-else>{{ modalItem.kol }}</span>
          </FormItem>
          <FormItem label="Collection" prop="collection">
            <Input
              v-if="isUpdate"
              placeholder=""
              v-model="modalItem.collection"
            />
            <span v-else>{{ modalItem.kol }}</span>
          </FormItem>
          <FormItem label="Belonging" prop="belonging">
            <Input
              v-if="isUpdate"
              placeholder=""
              v-model="modalItem.belonging"
            />
            <span v-else>{{ modalItem.belonging }}</span>
          </FormItem>
           <FormItem label="Campaign Name" prop="campaignName"
            ><Input v-if="isUpdate" placeholder="" v-model="modalItem.campaignName" />
            <span v-else>{{ modalItem.campaignName }}</span>
          </FormItem>
          
          <FormItem label="Category" prop="category">
            <!-- <Input
              v-if="isUpdate"
              placeholder=""
              v-model="modalItem.modelBwh"
            /> -->
            <span>{{ modalItem.category }}</span>
          </FormItem>
        </Form>
        </div>
        <div class="modal-right" style="margin-left: 10%;">
          <Form :label-width="120" ref="modalItem" label-position="left">
            <FormItem label="Source" prop="source">
            <Select  v-if="isUpdate"  v-model="modalItem.source">
              <Option v-for="item in sourceType" :key="item" :value="item.configKey">{{item.configKey}}</Option>
            </Select>
            <span v-else>{{ modalItem.source }}</span>
          </FormItem>
          <FormItem label="IP" v-if="IPlist && IPlist.length">
            <Select :disabled="isUpdate?false:true" v-model="IPInfo" multiple :max-tag-count="12" filterable allow-create>
                <Option v-for="item in IPlist" :value="item.tagName" :key="item.id">{{ item.tagName }}</Option>
            </Select>
          </FormItem>
          <FormItem label="Useage Restrictions" prop="usageRestrictions">
            <Input
              v-if="isUpdate"
              placeholder=""
              v-model="modalItem.usageRestrictions"
            />
            <span v-else>{{ modalItem.usageRestrictions }}</span>
          </FormItem>
          <FormItem label="Usage Start Date" prop="usageStartDate">
            <DatePicker v-if="isUpdate" @on-change="getUsageStartDate"
                      :value = "modalItem.usageStartDate"
                      format="yyyy-MM-dd HH:mm:ss"
                      type="datetime"></DatePicker>
            <span v-else>{{ modalItem.usageStartDate }}</span>
          </FormItem>
          <FormItem label="Dimensions" prop="dimensions">
            <Input
              v-if="isUpdate"
              placeholder=""
              v-model="modalItem.dimensions"
            />
            <span v-else>{{ modalItem.dimensions }}</span>
          </FormItem>
           <FormItem label="Model" prop="model">
            <Input
              v-if="isUpdate"
              placeholder=""
              v-model="modalItem.model"
            />
            <span v-else>{{ modalItem.model }}</span>
          </FormItem>
          <FormItem label="Model Figure" prop="modelFigure">
            <Input
              v-if="isUpdate"
              placeholder=""
              v-model="modalItem.modelFigure"
            />
            <span v-else>{{ modalItem.modelFigure }}</span>
          </FormItem>
          <FormItem label="Model Bwh" prop="modelBwh">
            <Input
              v-if="isUpdate"
              placeholder=""
              v-model="modalItem.modelBwh"
            />
            <span v-else>{{ modalItem.modelBwh }}</span>
          </FormItem>
        </Form>
        </div>

      </div>
    <Row class="code-row-bg" justify="end" type="flex">
      <Button @click="cancel" style="margin-right: 10px">取消</Button>
      <Button v-if="isUpdate" @click="save" type="primary">保存</Button>
    </Row>
  </div>
</template>
<script>
import { assetsApi } from '@/api/assets';
import { labelApi } from '@/api/label';
import pdf from 'vue-pdf';

export default {
  name: 'CodeReviewListForm',
  components: {
    pdf,
  },
  props: {
    // 是否为更新表单
    isUpdate: {
      type: Boolean,
      default: true
    },
    // 更新的表单数据对象
    updateData: {
      type: Object
    },
    show: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      modalItem: {
        fileType: 'jpeg',
        url: 'https://uxresources.baozun.com/prod/88000136/20210421/DC966C4323CD9CDAC4DF1042B2032937.jpg?x-oss-process=image/resize,m_pad,w_244,h_325',
        usageStartDate: null,
        uploaded: null,
        captureDate: null,
        fileSize: null,
        dimensions: null,
        colorSpace: null,
        flieType: null,
        assetType: null,
        season: null,
        year: null,
        status: null,
        dateCreated: null,
        source: null,
        gapDepartment: null,
        id: null,
        assetTags: null
      },
       IPtag:'',
      IPtags: [],
      IPArr:[],
      form: {},
      pdfSrc: '/sc.pdf',
      numPages: 0,
      tagInfo: [],
      tagList: [],
      fileTypeList: [],
      seasonTypeList: [],
      assetType: [],
      sourceType: [],
      publishStatusList: [],
      IPInfo: [],
      IPlist:[]
    };
  },
  watch: {
    updateData: function (newValue, oldValue) {
      this.modalItem = newValue;
      this.IPInfo = this.modalItem.ip;
      this.getTagInfo();
      this.getTagQuery()
    },
    isUpdate: function (newValue, oldValue) {
      if (newValue) {
        // 获取数据字典
        // this.getFileType();
        // this.getSeasonType();
        // this.getAssetType();
        // this.getScorseType();
        // this.getStatusType();
      }
    },
    show:  function (newValue, oldValue) {
      if (newValue) {
        // 获取数据字典
        this.getFileType();
        this.getSeasonType();
        this.getAssetType();
        this.getScorseType();
        this.getStatusType();
      }
    },
  },
  created () {
    // this.getNumPages()
  },
  mounted () {
    this.modalItem = this.updateData;
    // 获取数据字典
    this.queryList();
  },
  methods: {
    async getFileType () {
      let res = await assetsApi.getOneGroup({ group: 'file_type' });
      this.fileTypeList = res.data;
    },
    async getSeasonType () {
      let res = await assetsApi.getOneGroup({ group: 'season' });
      this.seasonTypeList = res.data;
    },
    async getAssetType () {
      let res = await assetsApi.getOneGroup({ group: 'asset_type' });
      this.assetType = res.data;
    },
    async getScorseType () {
      let res = await assetsApi.getOneGroup({ group: 'source' });
      this.sourceType = res.data;
    },
    async getStatusType () {
      let res = await assetsApi.getOneGroup({ group: 'publish_status' });
      this.publishStatusList = res.data;
    },
    async getTagQuery() {
      let res = await assetsApi.getTagQuery({ tagTypeName: 'IP'});
      this.IPlist = res.data
      console.log(this.IPlist)
    },
    changeIP(arr){
      this.IPArr = arr
    },
    // 标签列表
    async getTagInfo () {
      if (this.modalItem.id) {
        assetsApi.queryTag(this.modalItem.id).then(res => {
          this.tagInfo = [];
          if (res.data.length) {
            res.data.forEach(item => {
              this.tagInfo.push(item.id);
            });
          }
        });
      }
    },
    async queryList () {
      let params = {
        'pageNum': 1,
        'pageSize': 1000
      };
      let result = await labelApi.queryFileList(params);
      if (result.data.list) {
        // 数据处理
        let arr = [];
        result.data.list.forEach(item => {
          let obj = {
            value: item.id,
            label: item.tagName
          };
          arr.push(obj);
        });
        this.tagList = arr;
      }
    },
    // # 计算pdf页码总数
    getNumPages () {
      let loadingTask = pdf.createLoadingTask(this.pdfSrc);
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
          console.log(this.numPages);
        })
        .catch((err) => {
          console.error('pdf 加载失败', err);
        });
    },
    cancel () {
      this.$emit('on-form-close');
    },
    resetForm () {
      this.form = {};
      this.$refs['form'].resetFields();
    },
    async save () {
      if (!this.modalItem.name) {
        this.$Message.error('Asset名称不能为空');
        return;
      }
      console.log(this.IPInfo)
      this.modalItem.ip = this.IPInfo
      this.$Spin.show();
      this.modalItem.tagIdList = this.tagInfo;
      let res = await assetsApi.update(this.modalItem);
      this.$Message.success(res.msg);
      this.$Spin.hide();
      this.$emit('on-form-close');
    },
    getUploadedTime (uploadTime) {
      this.modalItem.uploaded = uploadTime;
    },
    getCaptureTime (captureTime) {
      this.modalItem.captureDate = captureTime;
    },
    getDateCreatedTime (createTime) {
      this.modalItem.dateCreated = createTime;
    },
    getUsageStartDate (usageStartDate) {
      this.modalItem.usageStartDate = usageStartDate;
    },
    getYear (year) {
      this.modalItem.year = year;
    },
    async batchExamine () {
      this.$Spin.show();
      let param = {

      };
      await assetsApi.audit(
        { idArray: [this.modalItem.id] }
      );
      this.$Spin.hide();
      this.$Message.success('审核成功');
      this.$emit('on-form-close');
    },
  }
};
</script>
<style lang="less" scoped>
.modal-source {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
    position: relative;
    .modal-right-btn{
      position: absolute;
      top: -56px;
      right: 49px;
    }
  .modal-left {
    flex: 1;
    border: 1px solid @primary-color;
    min-height: ~"calc(100vh - 300px)";
    position: relative;
    .default-img {
      max-width: 80%;
      max-height: 80%;
    }
    .modal-video {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .img-item {
      width: 80%;
      min-height: ~"calc(100vh - 300px)";
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .video-item {
      // display: flex;
      // align-items: center;
      // justify-content: center;
      width: 100%;
      min-height: ~"calc(100vh - 300px)";
    }
    .pdf-item {
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }
  }
  .modal-right {
    padding-left: 20px;
    width: 45%;
    /deep/ .ivu-form-item {
      margin-bottom: 10px;
    }
  }

}
.miniInput{width:65px;height: 26px;text-align: center;}
.formContainer{display: inline-block;width: 42%;margin-right:2%;}
</style>
